<template>
  <div class="app-container">
    <div class="contentDiv">
      <el-table :data="tableData" stripe fit resize style="width: 100%;" size="small">
        <el-empty slot="empty" :image-size="120" description="暂无数据" />
        <el-table-column type="index" label="序号" align="center" />
        <el-table-column label="导入项" min-width="100" align="center">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="关联" min-width="100" align="center">
          <template slot-scope="{row}">
            <span>{{ row.remarks }}</span>
          </template>
        </el-table-column>
        <el-table-column label="当前条数" min-width="80" align="center">
          <template slot-scope="{row}">
            <span>{{ row.count }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="downloadTemplate(row.type)">下载模板</el-button>
            <el-button type="primary" size="mini" @click="showImport(row)">导入</el-button>
          </template>
        </el-table-column>
      </el-table>
      <import-data ref="importRef" :type="type" :title="title" />
    </div>
  </div>
</template>
<script>
import importData from '@/views/set/file/importData'
import { getImportCount } from '@/api/user'
export default {
  name: 'ImportData',
  components: { importData },
  data() {
    return {
      dataList: [
        '计量单位,,meas',
        '价格组,,priceGroup',
        '渠道类型,上级渠道类型,channelType',
        '客户类别,上级客户类别,custType',
        '客户,价格组、渠道类型、客户类别,cust',
        '品牌,,brand',
        '存货分类,上级存货分类,invCatg',
        '存货,计量单位、存货分类、品牌,item',
        '部门,上级部门,dept',
        '职员,部门,staff',
        '仓库,,warehouse',
        '车辆,,truck',
        '线路,,route',
        '供应商,,supplier',
        '常用摘要,,summary',
        '项目,,proj'
      ],
      tableData: [],
      type: '',
      title: ''
    }
  },
  created() {
    this.tableData = this.dataList.map(it => {
      const arr = it.split(',')
      return {
        name: arr[0],
        remarks: arr[1],
        type: arr[2],
        count: null
      }
    })
    this.getList()
  },
  methods: {
    getTree() {},
    getLeftTree() {},
    downloadTemplate(type) {
      location.href = 'business/' + type + '.xlsx'
    },
    getList() {
      getImportCount().then(res => {
        const countData = res.data.data || {}
        this.tableData = this.dataList.map(it => {
          const arr = it.split(',')
          return {
            name: arr[0],
			remarks: arr[1],
            type: arr[2],
            count: countData[arr[2]]
          }
        })
      })
    },
    showImport(row) {
      this.type = row.type
      this.title = row.name
      this.$refs.importRef.option = {
        show: true
      }
    }
  }
}
</script>
<style scoped>
.label {
  font-size: 14px;
  margin-right: 5px;
  color: #333;
  margin-left: 10px;
}

.label:first-child {
  margin-left: 0;
}
</style>
